import React, { PureComponent } from 'react';
// import BaseOdocTypeComp from "./common/BaseOdocTypeComp";
import { WeaLocaleProvider, WeaDialog, WeaAlertPage } from 'ecCom';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { hashHistory } from 'react-router';

const { getLabel } = WeaLocaleProvider;

@inject('trackingWorkflowStore')
@observer
class TrackingWorkflowComp extends PureComponent {
  constructor(props) {
    super(props);
    hashHistory.replace({
      pathname: '/main/offical/customPage',
      query: {
        customListId: -9,
        ...props.location.query,
      },
    });
  }

  render() {
    return (<span />);
    // const { query } = this.props.location;
    // if (query.officalType) {
    //   let topTitle = getLabel('517315', '发文流程跟踪')
    //   if (query.officalType == '2') {
    //     topTitle = getLabel('517316', '收文流程跟踪')
    //   }
    //   if (query.officalType == '3') {
    //     topTitle = getLabel('517317', '签报流程跟踪')
    //   }
    //   return (
    //     <BaseOdocTypeComp
    //       topTitle={topTitle}
    //       tableUrl='/api/odoc/odocNewTodoList/getTracksReqList'
    //       topBtns={[
    //         {
    //           icon: <i className="icon-coms02-Delete" />,
    //           title: getLabel('517318', '批量取消跟踪'),
    //           onClick: (keys, datas, clear) => this.onCancelTrack(keys, clear),
    //           needCheck: true,
    //         }
    //       ]}
    //       tabKey='officalType'
    //       searchParams={{ officalType: query.officalType }}
    //       tableParams={{ officalType: query.officalType }}
    //       onOperatesClick={(record, index) => this.onOperatesClick(record, index)}
    //       getOtherDom={this.getOtherDom()}
    //       tableParams={toJS(query)}
    //       ref='baseOdocTypeComp'
    //     />
    //   )
    // } else {
    //   return (
    //     <BaseOdocTypeComp
    //       topTitle={getLabel('131972', '流程跟踪')}
    //       tabUrl='/api/odoc/odocNewTodoList/getTrackCount'
    //       tableUrl='/api/odoc/odocNewTodoList/getTracksReqList'
    //       tabKey='officalType'
    //       topBtns={[
    //         {
    //           icon: <i className="icon-coms02-Delete" />,
    //           title: getLabel('517318', '批量取消跟踪'),
    //           onClick: (keys, datas, clear) => this.onCancelTrack(keys, clear),
    //           needCheck: true,
    //         }
    //       ]}
    //       onOperatesClick={(record, index) => this.onOperatesClick(record, index)}
    //       ref='baseOdocTypeComp'
    //       getOtherDom={this.getOtherDom()}
    //       moreTimeGetCondition={true}
    //       searchParams={{ officalType: 1 }}
    //     />
    //   )
    // }
  }

  onOperatesClick(record, index) {
    const { trackingWorkflowStore } = this.props;
    const { processOpinion } = trackingWorkflowStore;
    if (index == '0') {
      const requestid = [record.requestid];
      this.onCancelTrack(requestid);
    } else if (index == '1') {
      const requestid = [record.requestid];
      const workflowid = record.workflowid;
      processOpinion(requestid, workflowid);
    }
  }

  onCancelTrack(keys, clear) {
    const { trackingWorkflowStore } = this.props;
    const { onCancelTrack } = trackingWorkflowStore;
    onCancelTrack(keys, clear, this.getData);
  }

  getData() {
    this.refs.baseOdocTypeComp.getTableDatas();
    this.refs.baseOdocTypeComp.getTabData();
  }

  getOtherDom() {
    const { trackingWorkflowStore } = this.props;
    const { processOpinionHide, processOpinionVisible } = trackingWorkflowStore;
    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@eyrv4s`}
        title={getLabel('125734', '流转意见')}
        icon="icon-coms-official"
        iconBgcolor="#f14a2d"
        onCancel={processOpinionHide}
        visible={processOpinionVisible}
        style={{ width: 600, height: 600 }}
        hasScroll
      // buttons={[
      //   <Button type="primary" onClick={()=>saveSuperviseOperation(getTableDatas)}>确认</Button>
      // ]}
      >
        {this.getDiaglogContent()}
      </WeaDialog>

    );
  }

  getDiaglogContent() {
    const { trackingWorkflowStore } = this.props;
    const { opinionList } = trackingWorkflowStore;
    if (toJS(opinionList).length == 0) {
      return (
        <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@5l8quf`} icon="icon-coms-blank" >
          <div style={{ color: '#000' }}>
            {getLabel(83553, '暂无数据')}
          </div>
        </WeaAlertPage>
      );
    }
    return (
      <div className="WFTrackDialog">
        {
          toJS(opinionList).map(item => (
            <div className="wf-req-sign-list-content">
              <div className="content-left" style={{ paddingLeft: '48px' }}>
                <img src={item.img_path} className="content-text-left-user-img" />
                <div style={{ width: '132px' }}>
                  <p><a href={`javaScript:openhrm(${item.displayid})`} onClick={e => pointerXY(e)}>{item.displayname}</a></p>
                  <span >
                    <a href="/spa/hrm/engine.html#/hrmengine/organization?showTree=false&amp;isView=1&amp;type=department&amp;id=&amp;_key=3b4uab"
                      target="_blank"
                      style={{ color: 'rgb(155, 155, 155)', whiteSpace: 'pre-wrap' }}
                    /></span>
                </div>
              </div>
              <div className="content-right">
                <div className="content-right-remark-html">
                  <p dangerouslySetInnerHTML={{ __html: item.log_remarkHtml == '' ? getLabel('517289', '无签字意见') : item.log_remarkHtml }} />
                </div>
                <p style={{ lineHeight: '24px', color: 'rgb(138, 138, 138)' }}>
                  <span className="receiveUserLable">{getLabel('15525', '接收人')} : </span>
                  <span title={item.receiveUser} className="receiveUser">{item.receiveUser}</span>
                </p>
                <p style={{ lineHeight: '22px', marginTop: '10px', color: 'rgb(154, 154, 154)' }}><span
                  style={{ marginRight: '8px' }}
                >{item.log_operatedate}&emsp;{item.log_operatetime} </span><span>[{item.log_nodename} / {item.operationname}]</span></p>
              </div>
            </div>
          ))
        }

      </div>
    );
  }
}

export default props => <TrackingWorkflowComp ecId={`${this && this.props && this.props.ecId || ''}_TrackingWorkflowComp@zl8mn7`} {...props} key={props.location.query.officalType || '0'} />;
